/* Copyright Tvb Network (Pty) Ltd. All rights reserved 2023 */
/* this is for th eaccount on top bar design */


/* Define CSS variables for light mode */
[data-theme="light"] {
	--igStgrd:--bgmig:url('../UIView/Access Icon/DTheme/DtmnGrd.png')
}


/* Dark mode variables */
[data-theme="dark"] {
	
}



/*-----------------here we create the second area named _cnt_lga2_ -----------------*/
._cnt_lga2_{
	width:55%;
	height:calc(100% - 15px);
	padding:0px;
	text-align:right;
	display:flex;
	align-items:right;
	justify-content:flex-end;
}



/* this div will contain theme, app, and lang */
._BxCCTLAps_{
	width:calc(100% - 10px);
	height:30px;
	padding:5px;
	padding-top:5px;
	padding-bottom:10px;
	display:flex;
	justify-content: center; /* Align items to the right */
}


/* button stool theme and langue */
._bxStollTL_{
	height:100%;
    width: auto; /* Set a specific width */
	margin-right:10px;
	padding-right:15px;
	cursor:pointer;
	display:flex;
	align-items:center;
	border-radius:5px;
	color:#d1d1d1;
	text-align:center;
	border:2px solid #EEB11550;
	font-size:10pt;
}

._bxStollTL_:hover{
	background-color:#EEB11560;
	transition:0.3s ease-in-out;
}


._icDtms_{
	width:28px;
	height:28px;
	padding-left:10px;
	vertical-align:center;
	text-align:bottom;
}






/*--------------------this is the box that will contain the current user session--------------------*/
._crtUsrbx_{
	width:250px;
	height:34px;
	background-color:#00000070;
	border-radius:20px;
	display:flex;
	align-items:center;
}



._cnt_acc_act_{
	display:inline-block;
	width:250px;
	height:34px;
	background-color:#000000aa;
	border-radius:20px;
	transition:0.3s ease-in-out;
	border:1px solid #d1d1d160;
	margin-top:0px;
	margin-right:15px;
	position:relative;
}



._lgou_bnt_{
	text-align:left;
	cursor:pointer;
}


/* loging out text */
._lgou_bntTxt_{
	color:#d1d1d1;
	margin-top:20px;
	margin-left:10px;
	display:inline-block;
	cursor:pointer;
	
}


/* loging out icon */
._lgou_ico_{
	display:inline-block;
	margin-top:20px;
	width:25px;
	height:25px;
	float:right;
	margin-right:10px;

}





/* icon view more account */
._ico_vw_mracc_{
	width:30px;
	height:30px;
	cursor:pointer;
	margin-right:8px;
}


/* this will contain the profil picture */
._ibx_nuss_{
	margin:2px;
	width:30px;
	height:30px;
	border-radius:50%;
	background-color:#000;
	cursor:pointer;
	
}

._ibx_nussTxt_{
	margin:2px;
	margin-top:6px;
	width:36px;
	height:30px;
	border-radius:50%;
	color:#f1f1f1;
	text-align:center;
}

._ibx_nuss_ico_{
	width:30px;
	height:30px;
	border-radius:50%;
}




/* this will contain the username */
._ibx_cnt_ssun_{
	height:40px;
	width:calc(100% - 80px);
	color:#d1d1d1;
	text-align:left;
}


._txtUsrNmonbx_{
	color:#d1d1d1;
	padding-left:5px;
	padding-top:2px;
	font-size:10pt;
}



._txtUsraccnBx_{
	color:#d1d1d1;
	padding-left:7px;
	font-size:9pt;
	padding-top:-5px;
}








/*------------------------------here we create the box of services & tech----------------------------*/
._txAcc_nm{
	color:#c1c1c1;
	
}


._txAcc_un{
	color:#d1d1d1;
	height:15px;
}

._ln_cntaccDet_{
	padding-left:10px;
}







/* this will contain the icon producct */
._viewPdcIco_{
	display:inline-block;
	width:26px;
	height:26px;
	cursor:pointer;
	outline:none;
	margin-left:10px;
	margin-right:5px;
	margin-top:5px;
	margin-bottom:5px;
}





/*-----------------tablet style------------*/
@media screen and (max-width: 769px) {
	/* here we have to adapte the box settings to the size of the mobile device*/
	._cnt_lga2_{
		padding-top:10px;
		width:65%;
		height:50px;
	}
}





/*-------------mobile style-------------*/
@media screen and (max-width: 480px) {
	._bxStollTL_{
		font-size:9pt;
	}

	._icDtms_{
		width:24px;
		height:24px;
	}
	
	._cnt_lga2_{
		width:100px;
		 display: flex;
		justify-content: flex-end;
	}
	
	
	
	
	._ibx_nuss_{
		width:28px;
		height:28px;
		margin: 0px;
	}

	._ibx_nuss_ico_{
		width:28px;
		height:28px;

	}

	._ibx_nussTxt_{
		margin-top:0px;
		padding-top:5px;
		width:32px;
		height:28px;
		border-radius:50%;
	}
	
	
	/*--------------------this is the box that will contain the current user session--------------------*/
	._crtUsrbx_{
		top:25px;
		width:30px;
		height:30px;
		border-radius:50%;
		background-color:#00000020;
	}
	
	
	
		
	._cnt_acc_act_{
		margin-top:8px;
		width:28px;
		height:30px;
		border-radius:50%;
		margin-right:10px;
		background-color:transparent;
		    border: 0px solid #d1d1d160;
	}
	
		
	/* this will contain the icon producct */
	._viewPdcIco_{
		margin-top:9px;
		margin-right:5px;
		margin-left:10px;
		width:26px;
		height:26px;
	}
	
	
	
		
	/* this will contain the username */
	._ibx_cnt_ssun_{
		/* height:40px; */
		/* width:calc(100% - 60px); */
		/* color:#d1d1d1; */
		/* text-align:left; */
		display:none;
	}
	
	
	
	
	/* icon view more account */
	._ico_vw_mracc_{
		margin-right:0px;
		display:none;
	}
}
	
	
	
	
	
	
	
	
	
	
	



/* Styles for Galaxy Fold in landscape mode */
@media screen and (min-width: 280px) and (max-width: 320px) and (max-height: 600px) and (orientation: landscape) {
  /* Your styles for Galaxy Fold in landscape mode go here */
}

/* Styles for Galaxy Fold in portrait mode */
@media screen and (min-width: 280px) and (max-width: 320px) and (min-height: 601px) and (orientation: portrait) {
	/* Your styles for Galaxy Fold in portrait mode go here */
	
	._cnt_lga2_{
		width:80px;
		min-height:30px;
		height:40px;
		text-align:left;
	}
	
	
	._viewPdcIco_{
		width:25px;
		height:25px;
		float:left;
	}
	
}